<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>用户详情</span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        @click="goback"
        >返回</el-button
      >
    </div>
    <ul v-for="item in getId">
      <li>id：{{ item.id }}</li>
      <li>姓名：{{ item.name }}</li>
      <li>年纪：{{ item.age }}</li>
      <li>头衔：{{ item.tittle }}</li>
      <li>创建时间：{{ item.times }}</li>
    </ul>
  </el-card>
</template>

<script>
import { times } from "../js/Times.js"

export default {
  name: "Details",
  data() {
    return {
      getId: [],
    }
  },
  props: ["id"],
  created() {
    this.get_id()
  },
  methods: {
    //解构可以嵌套
    async get_id() {
      const {
        data: { data: res },
      } = await this.$http.post("/id", {
        data: this.id,
      })

      this.getId = res

      this.getId[0].times = times(this.getId[0].times)
      console.log(this.getId)
    },

    //返回历史浏览记录
    goback() {
      // this.$router.go(-1)

      this.$router.back()
    },
  },
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 50%;
  margin-left: 50px;
}

.box-card ul li {
  list-style: none;
  line-height: 30px;
}
</style>
